<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">点我+1</button>

  <hr>
  <h2>当前的信息为：{{ msg }}</h2>
  <button @click="msg += '!'">修改信息</button>

  <hr>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>薪资：{{ person.job.j1.salary }} K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">增长薪资</button>
</template>

<script>
// Vue3中的computed 是一个组合式的api，所以需要通过import 进行引入。
import {ref, watch} from 'vue';

export default {
  name: 'Demo',
  setup() {
    // 数据
    let sum = ref(0);
    let msg = ref('我是一条信息');
    let person = ref({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    });

    console.log(sum);
    console.log(msg);
    console.log(person);

    // 使用ref 定义的基本数据类型，不能添加.value，因为watch监视的是refImpl对象，检测的是一个结构。
    watch(sum, (newValue, oldValue) => {
      console.log('sum的值变化了', newValue, oldValue);
    });

    // 使用ref 定义的对象类型，要添加.value。
    // 因为refImpl里面的Proxy的内存地址是不会改变的，如果不将整个对象替换的话。
    // 此时可以获取到RefImpl这个实例对象里面的value属性。
    // watch(person.value, (newValue, oldValue) => {
    //     console.log('person的值变化了', newValue, oldValue);
    // });

    // 如果不想使用.value，可以开启深度监视
    watch(person, (newValue, oldValue) => {
      console.log('person的值变化了', newValue, oldValue);
    }, {
      deep: true // 开启深度监视
    });

    // 返回一个对象（常用）
    return {
      sum,
      msg,
      person
    }
  }
}
</script>

<style>

</style>